<template>
    <div>
        <el-form label-position="left" label-width="100px" size="mini" inline>
            <el-form-item label="落地模型ID" label-width="100px">
                <el-input v-model="storageModel.model_id" size="mini" style="width: 80px" @keyup.enter.native="search" title="支持回车查询"></el-input>
            </el-form-item>
            <el-form-item label="分表周期" label-width="80px">
                <el-select v-model="storageModel.table_create_rand" placeholder="请选择" size="mini" style="width: 100px" @change="search">
                    <el-option label="全部" value="" key=""></el-option>
                    <el-option label="不分表" value="N" key="N"></el-option>
                    <el-option label="天" value="D" key="D"></el-option>
                    <el-option label="年" value="Y" key="Y"></el-option>
                    <el-option label="月" value="M" key="M"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="描述" label-width="50px">
                <el-input v-model="storageModel.desc" size="mini" style="width: 200px" @keyup.enter.native="search" title="支持回车查询"></el-input>
            </el-form-item>
            <el-form-item label="表前缀" label-width="70px">
                <el-input v-model="storageModel.table_name_prefix" size="mini" style="width: 200px" @keyup.enter.native="search" title="支持回车查询"></el-input>
            </el-form-item>
            <el-form-item label="模型详情" label-width="80px">
                <el-input v-model="storageModel.sequelize_details" size="mini" style="width: 200px" @keyup.enter.native="search" title="支持回车查询"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="search">查询&nbsp;<c-icon name="search" scale="0.7"></c-icon></el-button>
                <el-button type="danger" size="mini" @click="reset">重置&nbsp;<c-icon name="undo" scale="0.7"></c-icon></el-button>
            </el-form-item>
        </el-form>
        <el-table :data="storageModelList.slice((pageNo -1) * pageSize, ((pageNo -1) * pageSize) + pageSize)" v-loading="listLoading" 
            element-loading-text="列表加载中..." style="width: 100%" max-height="750" @sort-change = "sortChange" border fit highlight-current-row>
            <el-table-column align='center' width="120px" prop="" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="edit" @click="$router.push(`/storageModelConf/${scope.row.model_id}`)" title="编辑">编辑</el-button>
                    <el-button type="text" size="mini" icon="edit" @click="deleteModel(scope.row.model_id, scope.row.desc)" title="物理删除">物理删除</el-button>
                </template>
            </el-table-column>
            <el-table-column align='center' width="120px" prop="model_id" label="落地模型ID" sortable='custom'></el-table-column>
            <el-table-column align='left' width="200px" prop="desc" label="描述" sortable='custom'></el-table-column>
            <el-table-column align='left' width="200px" prop="table_name_prefix" label="表前缀" sortable='custom'></el-table-column>
            <el-table-column align='center' width="100px" prop="table_create_rand" label="分表周期" :formatter="tableCreateRandFormatter" sortable='custom'></el-table-column>
            <el-table-column align='left' prop="sequelize_details" label="模型详情(sequelize的model)" sortable='custom'></el-table-column>
        </el-table>
        <el-row type="flex" justify="start" style="padding:10px 0;">
            <el-pagination
                v-show = "storageModelList.length"
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="pageNo"
                :page-sizes="[10, 30, 50, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="storageModelList.length">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
import { getStorageModelList, deleteStorageModel } from '../../api/crawl.js';
import dayjs from 'dayjs';
import lodash from 'lodash';
import icon from 'vue-awesome';
export default {
    data(){
        return {
            listLoading : false,
            storageModelList : [],
            allStorageModelList : [],
             /* 分页相关 */
            pageNo : 1,
            pageSize : 30,
            storageModel : {
                model_id : '',
                desc : '',
                table_name_prefix : '',
                table_create_rand : '',
                sequelize_details : '',
            },
        }
    },
    components: { 
        'c-icon' : icon
    },
    created(){
        this.initStorageModelList();
    },
    watch: {
    },
    methods: {
        initStorageModelList(){
            this.listLoading = true;
            getStorageModelList().then(data=>{
                this.listLoading = false;
                this.storageModelList = data.rows;
                this.allStorageModelList = data.rows;
            })
        },
        tableCreateRandFormatter(row, column) {
            switch(row.table_create_rand){
                case 'N' :
                    return '不分表';
                case 'D' :
                    return '天';
                case 'Y' :
                    return '年';
                case 'M' :
                    return '月';
                default:
                    return '';
            }
        },
        sizeChange(pageSize){
            this.pageSize = pageSize;
        },
        currentChange(pageNo){
            this.pageNo = pageNo;
        },
        //排序
        sortChange(data){
            console.log(data)
            let {order, prop} = data;
            //如果是顺序则按照顺序排，否则就按照倒序排
            if(order === 'descending'){
                this.storageModelList = lodash.orderBy(this.storageModelList, [prop], 'desc');
            }else{
                this.storageModelList = lodash.orderBy(this.storageModelList, [prop], 'asc');
            }
            this.pageNo = 1;
        },
        //物理删除
        deleteModel(model_id, desc){
            this.$confirm(`确定彻底删除模型 [${desc}] ？删除后不可恢复！`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteStorageModel(model_id).then(data=>{
                    console.log('deleteStorageModel---', data)
                    if(data){
                        //提示删除成功
                        this.$alert('删除成功！', '提示', {
                            confirmButtonText: '确定'
                        });
                        this.initStorageModelList();
                    }
                }).catch(e=>{
                    console.error(e);
                })
            }).catch((e) => {
                console.error(e);
            });
        },
        search(){
            let resultList = this.allStorageModelList;
            console.log('this.storageModel------', this.storageModel)
            if(this.storageModel.model_id){
                resultList = resultList.filter(item => item.model_id === Number(this.storageModel.model_id));
            }
            if(this.storageModel.desc){
                resultList = resultList.filter(item => item.desc.toLowerCase().indexOf(this.storageModel.desc.toLowerCase()) > -1);
            }
            if(this.storageModel.table_name_prefix){
                resultList = resultList.filter(item => item.table_name_prefix.toLowerCase().indexOf(this.storageModel.table_name_prefix.toLowerCase()) > -1);
            }
            if(this.storageModel.table_create_rand){
                resultList = resultList.filter(item => item.table_create_rand.toLowerCase().indexOf(this.storageModel.table_create_rand.toLowerCase()) > -1);
            }
            if(this.storageModel.sequelize_details){
                resultList = resultList.filter(item => item.sequelize_details.toLowerCase().indexOf(this.storageModel.sequelize_details.toLowerCase()) > -1);
            }
            //console.log('resultList----',resultList)
            this.storageModelList = resultList;
            this.pageNo = 1;
        },
        reset(){
            this.storageModel.model_id = '';
            this.storageModel.desc = '';
            this.storageModel.table_name_prefix = '';
            this.storageModel.table_create_rand = '';
            this.storageModel.sequelize_details = '';
            this.initStorageModelList();
            this.pageNo = 1;
        },
    }
};
</script>